<template>
  <div class="wrapper">
    <div class="uc-main clearfix">
      <div class="uc-aside">
        <user-menu></user-menu>
      </div>
      <div class="uc-content">
        <div class="uc-panel">
          <div class="uc-bigtit">添加地址</div>
          <div class="uc-panel-bd">

            <div class="address-list">
              <div class="col col-4">
                <a @click="openForm()" class="item va-m-box ta-c add">
                  <div class="add-new">
                    <span class="ico"><i class="iconfont icon-tianjia"></i></span>
                    <div class="label">添加收货地址</div>
                  </div>
                </a>
              </div>
              <div v-for="address in addressList" :key="address.addressId" class="col col-4">
                <div class="item">
                  <div class="action">
                    <div class="fl"><a class="edit"  @click="openForm(address.addressId)">修改</a><a class="del" @click="open2(address.addressId)" >删除</a></div>

                  </div>
                  <div class="info">
                    <div class="info-item name ellipsis">{{address.addressName}} 收</div>
                    <div class="info-item address">{{address.addressDescribe}}</div>
                    <div class="info-item tel ellipsis">{{address.addressPhone}}</div>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="国家" :label-width="formLabelWidth">
          <el-select v-model="countryId" placeholder="国家">
            <el-option v-for="country in countrys" :label="country.countryName" :value="country.countryId" :key="country.countryId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="省" :label-width="formLabelWidth">
          <el-select v-model="provinceId" placeholder="省">
            <el-option v-for="province in provinces" :label="province.provinceName" :value="province.provinceId" :key="province.provinceId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="市" :label-width="formLabelWidth">
          <el-select v-model="cityId" placeholder="市">
            <el-option v-for="city in citys" :label="city.cityName" :value="city.cityId" :key="city.cityId"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="详细地址" :label-width="formLabelWidth">
          <el-input v-model="form.addressDescribe" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="收件人" :label-width="formLabelWidth">
          <el-input v-model="form.addressName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="收件人电话" :label-width="formLabelWidth">
          <el-input v-model="form.addressPhone" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveAddress()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import UserMenu from './UserMenu'
import addressUtil from '../../../common/AddressUtil'
import http from '../../../base/api/http'
export default {
  name: 'AddressListWrapper',
  components: {
    UserMenu
  },
  data () {
    return {
      data: {
        imageUrl: ''
      },
      countrys: [],
      provinces: [],
      citys: [],
      dialogFormVisible: false,
      form: {
        addressId: '',
        countryId: '',
        provinceId: '',
        cityId: '',
        addressDescribe: '',
        addressName: '',
        addressPhone: ''
      },
      formLabelWidth: '120px',
      countryId: '',
      provinceId: '',
      cityId: '',
      addressList: []
    }
  },
  watch: {
    countryId (val, oldVal) {
      this.getProvince(val)
    },
    provinceId (val, oldVal) {
      this.getCity(val)
    }
  },
  methods: {
    getProvince (val) {
      addressUtil.getProvince({
        'countryId': val
      }).then((res) => {
        if (res.status === 0) {
          this.provinces = res.data
        }
      })
    },
    getCity (val) {
      addressUtil.getCity({
        'provinceId': val
      }).then((res) => {
        if (res.status === 0) {
          this.citys = res.data
        }
      })
    },
    openForm (id) {
      if (id !== undefined && id !== '') {
        this.getAddress(id)
      }
      this.dialogFormVisible = true
    },
    saveAddress () {
      this.form.countryId = this.countryId
      this.form.provinceId = this.provinceId
      this.form.cityId = this.cityId
      http.requestPost('/java/api/address/save', this.form).then((res) => {
        if (res.status === 0) {
          alert('操作成功')
          this.$router.go(0)
        } else {
          alert('操作失败')
        }
      })
      this.dialogFormVisible = false
    },
    init () {
      addressUtil.getCountry().then((res) => {
        if (res.status === 0) {
          this.countrys = res.data
        }
      })
      http.requestQuickGet('/java/api/address/getAddressList').then((res) => {
        if (res.status === 0) {
          this.addressList = res.data
        }
      })
    },
    getAddress (addressId) {
      http.requestGet('/java/api/address/getAddress', {
        'addressId': addressId
      }
      ).then((res) => {
        if (res.status === 0) {
          this.form = res.data
          this.countryId = this.form.countryId
          this.provinceId = this.form.provinceId
          this.cityId = this.form.cityId
          this.getProvince(this.countryId)
          this.getCity(this.provinceId)
        }
      })
    },
    deleteAddress (addressId) {
      http.requestGet('/java/api/address/deleteAddress', {
        'addressId': addressId
      }
      ).then((res) => {
        if (res.status === 0) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.$router.go(0)
        } else {
          this.$message({
            type: 'info',
            message: '删除失败'
          })
        }
      })
    },
    open2 (addressId) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteAddress(addressId)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  },
  mounted () {
    this.init()
  }
}
</script>
<style></style>
